import { ILocalStore } from 'hooks/useLocalStore';
import { action, computed, makeObservable, observable } from 'mobx';

type PrivateFields = '_inputValue' | '_popoverVisible' | '_dropdownRef';

export default class MultiDropdownStore implements ILocalStore {
    private _inputValue = '';
    private _popoverVisible = false;
    private _dropdownRef: HTMLDivElement | null = null;

    constructor() {
        makeObservable<MultiDropdownStore, PrivateFields>(this, {
            _inputValue: observable,
            _popoverVisible: observable,
            _dropdownRef: observable,
            inputValue: computed,
            popoverVisible: computed,
            optionsFilter: computed,
            setInputValue: action.bound,
            setPopoverVisible: action.bound,
            setDropdownRef: action.bound,
        });
    }

    get inputValue(): string {
        return this._inputValue;
    }
    get popoverVisible(): boolean {
        return this._popoverVisible;
    }
    get dropdownRef(): HTMLDivElement {
        return this._dropdownRef as HTMLDivElement;
    }
    get optionsFilter(): RegExp {
        return new RegExp(`^(${this._inputValue})`, 'm');
    }

    setDropdownRef = (ref: HTMLDivElement): void => {
        this._dropdownRef = ref;
    };
    setInputValue = (value: string): void => {
        this._inputValue = value;
    };

    setPopoverVisible = (value: boolean): void => {
        this._popoverVisible = value;
    };

    destroy(): void {
        return;
    }
}
